<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      
        .box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            color: rgb(241, 236, 236);
            background-image: url(./imgs/index_bg.png);
            overflow: hidden;
        }

        .d1,
        .d3 {
            padding: 0 5px 0;
            width: 900px;
            height: 100%;
            /* box-sizing: border-box; */
            /* background-color: #ccc; */
        }

        .d2 {
            width: 100%;
            border: 2px solid #0b649d;
            padding: 10px;
        }

        .d11 {
            width: 100%;
            height: 140px;
            background-image: url(./imgs/border_bg01.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;

        }

        .d11a {
            margin: auto;
            margin-top: 15px;
            width: 175px;
            height: 25px;
            text-align: center;
            background-image: url(./imgs/title_bg01.png);
        }

        .d11b {
            /* margin: auto;
             */
            margin-top: 10px;
            text-align: center;
            font-size: 30px;
            font-weight: 600;
            color: #fff;
        }

        .d12,.d31,.d33,.d35 {
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #eff5f8;
            font-weight: 550;
            line-height: 30px;
            margin: auto;
            height: 30px;
            background-image: url(./imgs/box_title.png);
            background-repeat: no-repeat;
         background-size: 100% 100%;
            /* overflow: hidden; */
        }

        .d13 {
            /* box-sizing: border-box; */
            flex: 1;
            /* width: 100%; */
            height: 280px;

        }

        .d14 {
            width: 100%;
            height: 30px;
             text-align: center;
            font-size: 16px;
            color: #eff5f8;
            font-weight: 550;
            line-height: 30px;
            background-image: url(./imgs/box_title.png);
            background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .d15 table {
            margin-top: 10px;
            border-color: #02457e;
            border: 1px solid #02457e;
            color: #99cdec;
            text-align: center;
            border-collapse: collapse;
        }
        .d21{
            margin-top: 30px;
            width: 100%;
            background-image: url(./imgs/title_border.png);
            background-size: contain;
            background-repeat: no-repeat;
            height: 60px;
            position: relative;
            /* overflow: hidden; */
        }
        .d21a{
            position: absolute;
            top: -20px;
            color: #d4e6fa;
            /* margin-top: -20px; */
           left: 23%;
            font-size: 33px;
            font-weight: 560;
            /* vertical-align: middle; */
            height: 60px;
            /* line-height: 60px; */
        }
        .d21a img{
            height: 100%;
            vertical-align: middle;
        }
        .d22{
            width: 100%;
            height: 100px;
            display: flex;
        }
        .d22a{
            display: flex;
            flex: 2;
            height: 100%;
            color: #c2c6d3;
            justify-content: space-around;
            border: 1px solid #126ba9;
            align-items: center;
            
        }
        .d22a1 h3{
           
           
            margin-bottom: 5px;
            font-size: 30px;
        }
        .d22a2{
            display: flex;
            height: 80%;
            padding-left: 20px;
            border-left: 3px solid #8392a8;
        }
        .d22a2 img{
            height: 80%;
            margin-right: 10px;
        }
        .d22b{
           
            display: flex;
            flex: 1;
            height: 100%;
        }
        .d22b img{
            margin-left: 20px;
            margin-right: 20px;
        }
        .d22b1{
            padding-top: 30px;
        }
        .d22b1 p{
            margin: 0;
            padding: 0;
        }
        .d23{
            width: 100%;
            height: 100%;
            background-image: url(./imgs/Snipaste_2022-11-03_23-49-24.png);
            background-size: contain;
            background-repeat: no-repeat;
        }
        .d32,.d34,.d36{
            width: 100%;
            height: 230px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="d1">
            <div class="d11">
                <div class="d11a">当前对比数据</div>
                <div class="d11b">3,456,789</div>

            </div>

            <div class="d12">
               违法犯罪人员分析
            </div>
            <div class="d13">

            </div>
            <div class="d14">
               人口出入记录
            </div>
            <div class="d15">
                <table border width="95%">
                    <thead style="background-color: #02457e;">
                        <tr>
                            <th>姓名</th>
                            <th>角色</th>
                            <th>开门方式</th>
                            <th>时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张梦</td>
                            <td>访客</td>
                            <td>人脸</td>
                            <td>2018-11-01<br>13:51:23</td>
                        </tr>
                        <tr>
                            <td>李阳荣</td>
                            <td>业主</td>
                            <td>APP</td>
                            <td>2018-11-01<br>13:51:23</td>
                        </tr>
                        <tr>
                            <td>张无双</td>
                            <td>访客</td>
                            <td>人脸</td>
                            <td>2018-11-01<br>13:51:23</td>
                        </tr>
                        <tr>
                            <td>李阳</td>
                            <td>业主</td>
                            <td>APP</td>
                            <td>2018-11-01<br>13:51:23</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="d2">
         <div class="d21">
            <div class="d21a">
                <img src="./imgs/jinghui.png" alt="">
            智慧社区内网比对平台
            </div>
            
         </div>
         <div class="d22">
            <div class="d22a">
                <div class="d22a1">
                    <h3>16:19:50</h3>
                    <p>
                        2020/1/21 pm 周2
                    </p>
                </div>
                <div class="d22a2">
                    <img src="./imgs/weather/weather_img01.png" alt="">
                    <div class="d22a21">
                        <p>多云</p>
                        <p>16-22°c</p>
                        <span>局部地区气温极低</span>
                    </div>
                </div>
            
            </div>
            <div class="d22b">
                <img src="./imgs/line_bg.png" alt="">
                <div class="d22b1">
                    <p style="color: #ffff00;">No.1北京：123144人</p>
                    <p style="color: #00cc00;">No.2天津：12312人</p>
                    <p style="color: #6fbcf0;">No.3上海：12331人</p>
                </div>
            </div>
         </div>
         <div class="d23"></div>
        </div>
        <div class="d3">
           <div class="d31">
            违法犯罪人员年龄分布
           </div>
           <div class="d32"></div>
           <div class="d33">违法犯罪人员分布地区分布</div>
           <div class="d34"></div>
           <div class="d35">人口出入时间段统计</div>
           <div class="d36"></div>
        </div>
    </div>
</body>
<script src="./echarts.min.js"></script>
<script>
    const d1 =document.querySelector('.d13')
    const d2 =document.querySelector('.d32')
    const d3 =document.querySelector('.d34')
    const d4 =document.querySelector('.d36')
    const echa1=echarts.init(d1)
    const echa2=echarts.init(d2)
    const echa3=echarts.init(d3)
    const echa4=echarts.init(d4)
    const options={
        title:{
            text:'',
            show:false
        },
        tooltip:{//左边显示标
         trigger:'item,'
            
        },
        legend:{
            orient:'vertical',
            left: 'left',
           
        },
        series:{
            type:'pie',
            radius:'50%',
            data:[
                {name:'卖淫嫖娼',value:34},
                {name:'经侦嫌疑',value:154},
                {name:'重点人口',value:144},
                {name:'刑侦重点',value:44},
                {name:'吸毒人员',value:754},
            ]
        },
        emphasis:{
            itemStyle:{
                shadowOffsetX:0,
                shadowColor:'rgba(255,255,255,0.5)',
                shadowBlur:10,
            }
        }

    }
    echa1.setOption(options)
    const options1={
        tooltip:{
            trigger:'item'
        },
        legend:{
            left:'left',
             orient: 'vertical'
        },
        series:[{
            name:'违法年龄',
            type:'pie',
            center:['60%','50%'],
            radius:['30%','60%'],
            avoidLabelOverlap:false,
            label:{
                show:true,
                position:'left',

            },
            emphasis:{
                lebel:{
                    show:true,
                    fontSize:'40',
                    fontWeight:'bold'
                }
            },
            labelLine:{
                show:false
            },
            data:[
            {value:999,name:'18-30'},
            {value:111,name:'31-40'},
            {value:222,name:'41-50'},
            {value:333,name:'51-60'},
            {value:444,name:'61-70'},
            {value:123,name:'70岁以上'}
        ]
        },
        
    ]
    }
    echa2.setOption(options1)
    const options2 = {
            
            xAxis: {
               
                data: ['河北', '天津', '北京', '新疆', '内蒙','宁夏','河南']
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        color: '#fadb71',
                        type: 'dashed',
                        width: 1
                    }
                }
            },
            series: [
                {
                    type: 'bar',
                    color:'#fadb71',
                    data: [100,199, 200, 380, 490, 331,222,111]
                }
            ]
        }
        echa3.setOption(options2)
        const options3 = {

                xAxis: {

                    data: ['6:00-9:00', '10:00-12:00', '13:00-15:00', '16:00-20:00', '21:00-24:00']
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            color: '#fadb71',
                            type: 'dashed',
                            width: 1
                        }
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth:true,
                        color: '#00cc00',
                        opacity:0.3,
                        data: [100, 199, 200, 380, 490]
                    }
                ]
            }
            echa4.setOption(options3)
       
            const another =document.querySelector('.another')//生成图表对象
            const anothers=echarts.init(another)//配置图表数据
            const anotheropen = {
            xAxis: {
            data: ['another', 'another', 'another', 'another', 'another']
             },
            yAxis: {
            splitLine: {
            lineStyle: {
             color: '#fadb71',
             type: 'dashed',
             width: 1
             }
             }
             },
             series: [
             {
             type: 'line',
            smooth:true,
            color: '#00cc00',
             opacity:0.3,
             data: [another, another, another, another,another]
            }
            ]
             }
            anothers.setOption(anotheropen)

            const another =document.querySelector('.another')//生成图表对象
            const anothers=echarts.init(another)//配置图表数据
            const anotheropen = {
            title:{//配置图表标题
            text:'',
            show:false
            },
            xAxis: {//配置x轴数据
            data: ['配置项', '配置项', '配置项', '配置项', '配置项']
             },
            yAxis: {
            //min:'最小值'
            //max:'最大值' },
             tooltip:{//左边显示标
               trigger:'item,',
            },
            legend:{
             orient:'vertical',
             left: 'left',
             },
            splitLine: {
            lineStyle: {
             color: '#fadb71',
             type: 'dashed',
             width: 1//宽度
             }
             }
             },
             series: [ //系列、数据、图的映射
             {
             type: 'line',//图表的属性，圆是pie，柱形图 bar ,散点，scatter，折线line
            smooth:true,//是否平滑
            color: '#00cc00',
             opacity:0.3,
             data: [配置项数据, 配置项数据, 配置项数据, 配置项数据,配置项数据] //图表数据
            }
            ]
             }
            anothers.setOption(anotheropen)
</script>

</html>